﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link type="text/css" href="css/tile.css" rel="stylesheet" />
    <script src="scripts/jquery-1.7.1.js"></script>
    <script src="scripts/metro.tile.js"></script>
    <style>
        .tile-group {
            margin-right:10px;
            width: 610px;
            float:left;
        }

        .tile {
            float: left;
            width: 200px;
            height: 200px;
        }

        .tilebig {
            float: left;
            width: 403px;
            height: 403px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".tile-group").metroTileGroup();

            //I know this is hacky, but it gives a simple example of grabbing the tile behavior, and interacting with it.
            $('button').click(function () {
                var methodToCall = this.textContent;
                var metroTiles = $('.tile, .tilebig,').metroTile(
                    function (tile) {
                        tile[methodToCall](250);
                    });

            });
        });


    </script>
</head>
<body>
    <button>showFront</button>
    <button>showBack</button>
    <button>peek</button><br />
    <div class="no-tile-group tile-group">
        <div class="tilebig" style="background-color: blue; color: white;">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: green">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: red">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: yellow">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: purple">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: blue">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: green">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: red">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: yellow">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
        <div class="tile" style="background-color: purple">
            <div>
                Front of Tile
            </div>
            <div>
                back of tile
            </div>
        </div>
    </div>

    <div class="no-tile-group tile-group">
        <div class="tile" style="background-color: purple; color: white;">
            <div>
                <img src="images/Barnicles.jpg" />
            </div>
            <div style="padding: 3px;">
                Oh no! I got a barnacle stuck to my back! Now I'm obligated to pay for it's college I guess...Just kidding, that's my son...and I probably will end up paying for his college...
            </div>
        </div>
        <div class="tile" style="background-color: red; color: white;">
            <div>
                <img src="images/FeedingTheBirds.jpg" />
            </div>
            <div style="padding: 3px;">
                We had a lot of fun feeding the birds at the aviary!
            </div>
        </div>
        <div class="tile" style="background-color: lightgreen;">
            <div>
                <img src="images/FunAtTheAviary.jpg" />
            </div>
            <div style="padding: 3px;">
                More fun at the aviary!
            </div>
        </div>
        <div class="tilewide" style="background-color: blue; color: white;">
            <div>
                <div class="tile" style="float: left; background-color: red;">
                    <div>
                        <img src="images/FeedingTheBirds.jpg" />
                    </div>
                    <div style="padding: 3px;">
                        We had a lot of fun feeding the birds at the aviary!
                    </div>
                </div>
                <div class="tile" style="float: left; background-color: green">
                    <div>
                        <img src="images/FunAtTheAviary.jpg" />
                    </div>
                    <div style="padding: 3px;">
                        More fun at the aviary!
                    </div>
                </div>
            </div>
            <div>
                Here I've embedded 2 smaller tiles in the front of this larger tile! Tiles are fun!
            </div>
        </div>
        <div class="tilebig" style="background-color: purple; color: white;">
            <div style="background-color: teal; padding-left: 3px;">
                <h1>This is the front of the tile!</h1>
                Maybe you can put a headline in here, or something...
            </div>
            <div style="padding: 3px;">
                <h1>This is the back of the tile.</h1>
                You can put other stuff here as was demonstrated earlier.
            </div>
        </div>
    </div>
</body>
</html>
